// 商品界面
<template>
  <div>
    <el-select
      v-model="value"
      placeholder="请选择"
      style="width: 100px; margin: 5px 0 5px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-input
      prefix-icon="el-icon-search"
      placeholder="请输入内容"
      style="width: 200px"
      v-model="input"
      clearable
    >
    </el-input>
    <el-button
      type="success"
      icon="el-icon-search"
      style="width: 90px; margin-left: 10px"
      @click="handleSearch()"
      >搜索</el-button
    >
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="width: 120px; float: right"
      @click="handleAdd()"
      >添加商品</el-button
    >
    <el-table :data="tableData" border stripe style="border:1px solid #ccc;width: 100%;font-weight: 500; " >
      
      <el-table-column
        prop="commodityName"
        label="商品名"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="commodityType"
        label="品类"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="commodityOrigin"
        label="产地"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="commodityFactoryTime"
        label="出厂日期"
        align="center"
        width="100px"
      >
      </el-table-column>

      <el-table-column
        prop="commodityShelf"
        label="保质期"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="commodityPackage"
        label="包装规格"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="commodityPrice"
        label="价格"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column align="center" label="操作" style="width: 240px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            icon="el-icon-search"
            style="width: 80px"
            @click="handleCheck(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            style="width: 80px"
            @click="handleUpdate(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            style="width: 80px"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增编辑弹框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <!-- 面包屑导航 -->
      <el-breadcrumb
        v-show="this.allid == 1"
        separator-class="el-icon-arrow-right"
        style="margin-bottom:40px;font-size:20px"
      >
        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品添加</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 面包屑导航 -->
      <el-breadcrumb
        v-show="this.allid == 2"
        separator-class="el-icon-arrow-right"
        style="margin-bottom:40px;font-size:20px"
      >
        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品编辑</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 面包屑导航 -->
      <el-breadcrumb
        v-show="this.allid == 3"
        separator-class="el-icon-arrow-right"
        style="margin-bottom:40px;font-size:20px"
      >
        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品详情</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 编辑 新增 -->
      <el-form v-if="this.allid == 1 || this.allid == 2"
        :model="ruleForm"
        :rules="rules"
        status-icon
        ref="refRuleForm"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="commodityName">
          <el-input v-model="ruleForm.commodityName"></el-input>
        </el-form-item>
        <el-form-item label="品类" prop="commodityType">
          <el-input v-model="ruleForm.commodityType"></el-input>
        </el-form-item>
        <el-form-item label="材质或制作方法" prop="commodityMaterial">
          <el-input v-model="ruleForm.commodityMaterial"></el-input>
        </el-form-item>
        <el-form-item label="适用规则" prop="commodityWeightStandard">
          <el-input v-model="ruleForm.commodityWeightStandard"></el-input>
        </el-form-item>
        <el-form-item label="专属规格" prop="commodityStandard">
          <el-input v-model="ruleForm.commodityStandard"></el-input>
        </el-form-item>
        <el-form-item label="包装规格" prop="commodityPackage">
          <el-input v-model="ruleForm.commodityPackage"></el-input>
        </el-form-item>
        <el-form-item label="口味" prop="commodityTaste">
          <el-input v-model="ruleForm.commodityTaste"></el-input>
        </el-form-item>
        <el-form-item label="特殊功用" prop="commoditySpecial">
          <el-input v-model="ruleForm.commoditySpecial"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="commodityPrice">
          <el-input v-model="ruleForm.commodityPrice"></el-input>
        </el-form-item>

        <el-form-item label="图片" v-if="this.allid == 2">
          <div class="demo-image">
            <div class="block">
              <el-image
                style="width: 200px; height: 200px"
                :src="imageUrl"
              ></el-image>
            </div>
          </div>

          <el-upload
            :action="url"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
          >
            <i class="el-icon-plus" style="font-size:14px">请选择图片</i>
          </el-upload>
          <!-- 图片放大 -->
          <el-dialog :visible.sync="dialogVisible2">
            <img width="50%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="图片" v-if="this.allid == 1">
           <el-upload
            :action="url"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
          >
            <i class="el-icon-plus" style="font-size:14px">请选择图片</i>
          </el-upload>
          <!-- 图片放大 -->
          <el-dialog :visible.sync="dialogVisible2">
            <img width="50%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="产地" prop="commodityOrigin">
          <el-input v-model="ruleForm.commodityOrigin"></el-input>
        </el-form-item>
        <el-form-item label="出厂日期" prop="commodityFactoryTime">
          <el-date-picker
            v-model="ruleForm.commodityFactoryTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="保质期" prop="commodityShelf">
          <el-input v-model="ruleForm.commodityShelf"></el-input>
        </el-form-item>
        <el-form-item label="特殊说明" prop="commoditySpecialMsg">
          <el-input v-model="ruleForm.commoditySpecialMsg"></el-input>
        </el-form-item>
      </el-form>
      <!-- 查看 -->
       <el-form v-else
        :model="ruleForm"
        :rules="rules"
        status-icon
        ref="refRuleForm"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="commodityName">
          <el-input v-model="ruleForm.commodityName" readonly></el-input>
        </el-form-item>
        <el-form-item label="品类" prop="commodityType">
          <el-input v-model="ruleForm.commodityType" readonly></el-input>
        </el-form-item>
        <el-form-item label="材质或制作方法" prop="commodityMaterial">
          <el-input v-model="ruleForm.commodityMaterial" readonly></el-input>
        </el-form-item>
        <el-form-item label="适用规则" prop="commodityWeightStandard">
          <el-input v-model="ruleForm.commodityWeightStandard" readonly></el-input>
        </el-form-item>
        <el-form-item label="专属规格" prop="commodityStandard">
          <el-input v-model="ruleForm.commodityStandard" readonly></el-input>
        </el-form-item>
        <el-form-item label="包装规格" prop="commodityPackage">
          <el-input v-model="ruleForm.commodityPackage" readonly></el-input>
        </el-form-item>
        <el-form-item label="口味" prop="commodityTaste">
          <el-input v-model="ruleForm.commodityTaste" readonly></el-input>
        </el-form-item>
        <el-form-item label="特殊功用" prop="commoditySpecial">
          <el-input v-model="ruleForm.commoditySpecial" readonly></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="commodityPrice">
          <el-input v-model="ruleForm.commodityPrice" readonly></el-input>
        </el-form-item>

        <el-form-item label="图片">
          <div class="demo-image">
            <div class="block">
              <el-image
                style="width: 200px; height: 200px"
                :src="imageUrl"
              ></el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="产地" prop="commodityOrigin">
          <el-input v-model="ruleForm.commodityOrigin" readonly></el-input>
        </el-form-item>
        <el-form-item label="出厂日期" prop="commodityFactoryTime">
          <el-input v-model="ruleForm.commodityFactoryTime" readonly></el-input>
        </el-form-item>
        <el-form-item label="保质期" prop="commodityShelf">
          <el-input v-model="ruleForm.commodityShelf" readonly></el-input>
        </el-form-item>
        <el-form-item label="特殊说明" prop="commoditySpecialMsg">
          <el-input v-model="ruleForm.commoditySpecialMsg" readonly></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleConfirm()"
          >确 定
        </el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <div class="block">
      <!-- size-change 每页条数，改变时会触发	
    current-change 当前页，改变时会触发	
    current-page 当前页数 
    page-sizes 每页显示个数选择器的选项设置
    page-size 每页显示条目个数
    layout	组件布局
    total	总条目数-->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pageNo"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>
      <Modal v-show="isLoading"><Center><Loading v-show="isLoading"/></Center></Modal>
  </div>
</template>

<script>
import {
  getCommodityList,
  deleteCommodity,
  addCommodity,
  updateCommodity,
  getCommodityById,
} from "@/services/Commodity";
import Loading from '@/components/Loading.vue'
import Modal from '@/components/Modal.vue'
import Center from '@/components/Center.vue'
export default {
 components:{Loading,Modal,Center},
  data() {
    var validateCommodityName = (rule, value, callback) => {
      var reg = /^[\u4e00-\u9fa5]+$/;

      if (value === "") {
        callback(new Error("请输入商品名称"));
      } else if (!reg.test(value)) {
        callback(new Error("商品名称只能输入中文"));
      } else {
        callback();
      }
    };
    var validatePrice = (rule, value, callback) => {
      var reg = /^[+]{0,1}(\d+)$/;

      if (value === "") {
        callback(new Error("请输入价格"));
      } else if (!reg.test(value)) {
        callback(new Error("价格只能是正整数"));
      } else {
        callback();
      }
    };
    return {
      isLoading:false,
      url: "/api/pet_sys/upload.do",
      dialogImageUrl: "",
      imageUrl: "",
      dialogVisible: false,
      dialogVisible2: false,
      readonly: true,

      tableData: [],
      input: "",
      options: [
        {
          value: "commodityName",
          label: "商品名",
        },
        {
          value: "commodityType",
          label: "品类",
        },
      ],
      value: "",

      total: 0,
      pageNo: 1,
      pageSize: 4,

      title: "",
      ruleForm: {
        commodityId: "",
        commodityName: "",
        commodityType: "",
        commodityMaterial: "",
        commodityWeightStandard: "",
        commodityStandard: "",
        commodityPackage: "",
        commodityTaste: "",
        commoditySpecial: "",
        commodityPrice: "",
        commodityImages: "",
        commodityOrigin: "",
        commodityFactoryTime: "",
        commodityShelf: "",
        commoditySpecialMsg: "",
      },
      allid: "",
      checkId:"",
      // 验证规则
      rules: {
        commodityName: [
          { required: true, validator: validateCommodityName, trigger: "blur" },
        ],
        commodityType: [
          { required: true, message: "请输入品类", trigger: "blur" },
        ],
        commodityPrice: [
          { required: true, validator: validatePrice, trigger: "blur" },
        ],
        commodityFactoryTime: [
          { required: true, message: "请输入出产日期", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    console.log("商品界面创建了");
    this.isLoading = true;
    setTimeout(() => {
      this.tableList();
      this.isLoading = false;
    }, 200);
    
    // var resp = await getCommodityList();
    // this.tableData = resp.data.list;
    // this.total = resp.data.total;
    // console.log("总条目: " + this.total);
  },
  methods: {
    
    //   表格接口列表
    async tableList() {
      var resp = await getCommodityList(null, null, this.pageNo, this.pageSize);
      this.tableData = resp.data.list;
      this.total = resp.data.total;
    },
    async handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.tableList();
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.tableList();
    },
    // 查询
    async handleSearch() {
      var resp = null;
      if (this.value === "commodityName") {
        resp = await getCommodityList(
          this.input,
          null,
          this.pageNo,
          this.pageSize
        );
      } else if (this.value === "commodityType") {
        resp = await getCommodityList(
          null,
          this.input,
          this.pageNo,
          this.pageSize
        );
      } else if (this.value === "") {
        resp = await getCommodityList(null, null, this.pageNo, this.pageSize);
      }
      this.tableData = resp.data.list;
      this.total = resp.data.total;
    },
    // 删除
    async handleDelete(index, row) {
      console.log("===handleDelete====");
      console.log(index);
      console.log(row);

      this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          let resp = await deleteCommodity(row.commodityId);
          console.log("商品id: " + row.commodityId);
          console.log(resp.data);
          if (resp.data === true) {
            this.tableList();
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增
    handleAdd() {
      this.allid = 1;
      this.dialogVisible = true;
      this.$refs.refRuleForm.resetFields(); //清空表格数据
    },
    // 取消
    handleClose() {
      this.dialogVisible = false;
    },
    // 编辑
    handleUpdate(index, row) {
      console.log("====更改商品===");
      console.log(index, row.commodityId);
      this.dialogVisible = true; //显示弹框

      this.ruleForm = row; //row当前行数据，把当前行的数据赋值给 表单
      this.allid = 2;
    },
    // 查看
    async handleCheck(index, row) {
      console.log("====查看商品===");
      console.log(index, row.commodityId);
      this.dialogVisible = true; //显示弹框

      this.allid = 3;
      let resp = await getCommodityById(row.commodityId);
      console.log("===查看===");
      console.log(resp.data);
      this.imageUrl = resp.data.commodityImages;
      this.ruleForm = resp.data;
    },
    // 确定
    async dialogVisibleConfirm() {
      // 新增接口
      if (this.allid === 1) {
        var resp = await addCommodity(this.ruleForm);
        if (resp.data === true) {
          this.$message.success("添加成功"); //新增成功消息提示
          this.$refs.refRuleForm.resetFields(); //清空表格数据
          this.dialogVisible = false; //关闭弹框
          this.tableList();
        } else {
          this.$message.error("添加失败");
        }
        // 修改
      } else if (this.allid === 2) {
        var resp = await updateCommodity(
          this.ruleForm.commodityId,
          this.ruleForm
        );
        if (resp.data === true) {
          this.$message.success("修改成功"); //编辑成功消息提示
          this.$refs.refRuleForm.resetFields(); //清空表格数据
          this.dialogVisible = false; //关闭弹框
          this.tableList();
        } else {
          this.$message.error("修改失败");
        }
        // 查看
      } else if (this.allid === 3) {
        this.$refs.refRuleForm.resetFields(); //清空表格数据
        this.dialogVisible = false; //关闭弹框
      }
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      console.log("===res.data.path==");
      console.log(res.data.path);
      console.log(file);
      this.ruleForm.commodityImages = res.data.path;
    },
    //
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file.url);
      this.dialogImageUrl = file.url;
      this.dialogVisible2 = true;
      // console.log(store.store_license_images)
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
